import { Fragment, useContext } from "react";
import { Outlet, Link } from "react-router-dom";

import { UserContext } from "../../contexts/user.context";
import { CartContext } from "../../contexts/cart.context";

import CartIcon from "../../components/cart-icon/cart-icon.component";
import CartDropdown from "../../components/cart-dropdown/cart-dropdown.component";

import { ReactComponent as FeigeLogo } from "../../assets/logo.svg";
import { signOutUser } from "../../utils/firebase/firebase.utils";

import {
  NavigationContainer,
  LogoContainer,
  NavLinks,
  NavLink,
} from "./navigation.styles";

const Navigation = () => {
  const { currentUser } = useContext(UserContext);
  const { isCartOpen } = useContext(CartContext);
  return (
    <Fragment>
      <NavigationContainer>
        <LogoContainer to="/">
          <FeigeLogo />
        </LogoContainer>
        <NavLinks>
          <NavLink to="/shop">房源</NavLink>

          {currentUser ? (
            <NavLink as="span" onClick={signOutUser}>
              退出
            </NavLink>
          ) : (
            <NavLink to="/auth">登录</NavLink>
          )}
          <CartIcon />
        </NavLinks>
        {isCartOpen && <CartDropdown />}
      </NavigationContainer>
      <Outlet />
    </Fragment>
  );
};
export default Navigation;
// //14
//        <div className="navigation">
//         <Link className="logo-container" to="/">
//           <FeigeLogo className="logo"></FeigeLogo>
//         </Link>
//         <div className="nav-links-container">
//           <Link className="nav-link" to="/like">
//             收藏
//           </Link>
//           <Link className="nav-link" to="/search">
//             查询
//           </Link>
//           <Link className="nav-link" to="/shop">
//             SHOP
//           </Link>
//           {currentUser ? (
//             <span className="nav-link" onClick={signOutUser}>
//               {" "}
//               SIGN OUT{" "}
//             </span>
//           ) : (
//             <Link className="nav-link" to="/auth">
//               登录
//             </Link>
//           )}{" "}
//           <CartIcon />
//         </div>
//         {isCartOpen && <CartDropdown />}
//       </div>
//       <Outlet></Outlet>
